<style scoped>
	
.layout-logo {
  width: 200px;
  height: 64px;
  border-radius: 3px;
  position: relative;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #002140;
}
.layout-logo div {
  padding: 10px 20px;
  height: 40px;
  width: 120px;
  background: #ccc;
  border-radius: 4px;
}
.layout-nav {
  width: 420px;
  float: right;
  margin-right: 20px;
}
.layout {
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  height: 100%;
}
.layout-header-bar {
  background: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
.ivu-menu-horizontal.ivu-menu-light:after {
  height: 0;
}
.contantScroll {
  /*min-width: 940px;*/
  /*overflow: auto;*/
 
 padding-top: 72px;
 min-width: 1680px;
  height: 100%;
  bottom: 0px;
  overflow: auto;
  background: #fff;
  padding-bottom: 35px;
}

/* 左边菜单容器 */

.leftMenuContainOne {
  position: fixed;
  top: 0;
  left: 0;
  bottom: -4px;
  width: 200px;
  background: #001529;
  /* #495060; */
  z-index: 200;
  overflow: visible;
  transition: 0.6s;
}
.leftMenuContainTwo {
  position: fixed;
  top: 0;
  left: 0;
  bottom: -4px;
  width: 64px;
  background: #001529;
  /* #495060; */
  z-index: 200;
  box-shadow: 0 2px 3px 2px rgba( 0, 0, 0, .1);
  overflow: visible;
  transition: 0.6s;
}

/* 收起时，左边导航菜单 */

.menuIcon {
  width: 64px;
  height: 56px;
  background: #001529;
  /* #495060; */
  text-align: center;
  line-height: 56px;
  margin-right: 5px;
}
.ivu-dropdown:hover .menuIcon,
.menuIcon:hover {
  background: #2d8cf0;
  transition: 0.6s;
  /* #ecf5ff; */
}

/* icon旋转 */

.iconRotateDivOne {
  position: fixed;
  top: 0;
  left: 216px;
  width: 64px;
  height: 64px;
  line-height: 64px;
  z-index: 200;
  transition: 0.6s;
}
.iconRotateDivTwo {
  position: fixed;
  top: 0;
  left: 80px;
  width: 64px;
  height: 64px;
  line-height: 64px;
  z-index: 200;
  transition: 0.6s;
}
.iconRotateOne {
  transform: rotate(0deg);
  transition: transform 1s;
  cursor: pointer
}
.iconRotateTwo {
  transform: rotate(90deg);
  transition: transform 1s;
  cursor: pointer
}

/* 内容容器与左边的距离1 */

.contentOne {
  padding-left: 200px;
  transition: 0.6s;
  height: 100%;
}
.contentTwo {
  padding-left: 64px;
  transition: 0.6s;
}

/* header宽度变化 */

.headerContain {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 3px 2px rgba( 0, 0, 0, .1);
  z-index: 100;
  padding: 0 15px 0 15px;
  transition: 0.6s;
}

/* 折叠后，子菜单 */

.isFold .ivu-select-dropdown {
  background-color: #001529 !important;
}

/* 修改主题 */

.ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened {
  background: #000c17;
}

/* 修改默认样式：左边菜单【收起】，显示的子菜单 */

.myDropdownMenu {
  background: #001529 !important;
  margin: -5px 0;
  padding: 5px 0;
  border-radius: 4px;
}
.myDropdownMenu li {
  color: #ffffff !important;
}
.myDropdownMenu li:hover {
  background: #2d8cf0 !important;
}

/* 滚动条显示1 */

.happy-scroll-strip .happy-scroll-strip--vertical {
  z-index: 2000 !important;
}
.footContain {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: rgb(245, 247, 249);
}
.contentContain {
  padding: 0 4px;
  margin: 60px 0 20px 0
}
.isOpen {
  height: 100%;
  width: 200px;
}
.isClose {
  height: 100%;
  width: 64px;
}
.closeTitle {
  width: 64px;
  height: 64px;
  text-align: center;
  line-height: 64px;
  border-bottom: 2px solid #002140;
  color: white;
}
.BreadcrumbContain {
  margin: 16px 0 6px 0;
  text-align: left;
}

</style>
<template>
  <div class="layout">
    <!-- 左边菜单 start -->
    <div :class="leftMenuContainObj">
      <happy-scroll color="rgba(153, 153, 153, 1)" resize :style="{overflow:iconRotate?'hidden':'visible'}">
        <!-- 展开 -->
        <div class="isOpen" v-show="iconRotate">
          <div class="layout-logo"><span style="font-size:20px;">智能工场</span> </div>
          <!---->
          <Menu :active-name="menuLocal.index+'-'+menuLocal.index2" :open-names="[menuLocal.index]"  theme="dark" width="auto" :accordion="true"  ref="side_menu">
            <Submenu :name="index" v-for="(item,index) in menuData" :key=" 'bp'+index ">
              <template slot="title">
                <div style="display:inline-block;">
                  <Icon :type="item.icon"></Icon>
                	<span style="font-size:16px;"  v-if=" item.children.length > 0 ">{{item.text}}</span>
                	<span style="font-size:16px;"  v-if=" item.children.length == 0 "    >
                		<router-link tag="span" :to="item.url" >
                			{{item.text}}
                		</router-link>
                	</span>
                
                </div>
              </template>
              <MenuItem :name="index+'-'+index2" v-for="(item2,index2) in item.children" :key=" 'bc'+index2 " @click.native="toPage(item, index, item2, index2)">
              <Icon :type="item2.icon"></Icon>{{item2.text}} </MenuItem>
            </Submenu>
          </Menu>
        </div>
        <!-- 收起 -->
        <div class="isClose isFold" v-show="!iconRotate">
          <div class="closeTitle"> MS </div>
          <Dropdown placement="left-start" v-for="(item,index) in menuData" :key="'sp'+index">
            <div class="menuIcon">
              <div :type="item.icon" :size="20" :color="'white'">
              </div>
            </div>
            <DropdownMenu slot="list" class="myDropdownMenu" v-show="item.children.length > 0">
              <DropdownItem v-for="(item2,index2) in item.children" :key="'sc'+index2" @click.native="toPage(item, index, item2, index2)" style="line-height:32px;">
                <Icon :type="item2.icon"></Icon>{{item2.text}} </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </happy-scroll>
    </div>
    <!-- 左边菜单 end -->
    <!-- 展开or收起 -->
    <div :class="iconRotateDivObj">
      <Icon type="md-reorder" :size="24" :class="iconRotateObj" @click.native="iconRotateClick"></Icon>
    </div>
    <!-- 页面head start -->
    <Header :class="['headerContain']">
      <div style="float:right;">
        <Dropdown style="margin-left: 20px">
          <Badge :count="0">
            <Avatar shape="circle" icon="ios-person" :style="{background: '#ffbf00'}" /> </Badge> admin
          <DropdownMenu slot="list">
            <DropdownItem>个人信息</DropdownItem>
            <DropdownItem @click.native="logout()">退出</DropdownItem>
          </DropdownMenu>
        </Dropdown>
      </div>
    </Header>
    <!-- 页面内容 -->
    <Layout :class="contentContainObj">
      <!-- , background: '#fff' -->
      <!--<Content class="contentContain">
        <Breadcrumb class="BreadcrumbContain">
          <BreadcrumbItem v-for="(item,index) in BreadcrumbData" :key=" 'n'+index ">{{item}}</BreadcrumbItem>
        </Breadcrumb>
        
      </Content>-->
      <div class="contantScroll">
          <router-view></router-view> 
        </div>
     
      <div class="footContain"> 2018-2028 &copy; hello </div>
    </Layout>
  </div>
</template>
<script>
import menuData from '../api/menu.js'
export default {
  name: 'Home',
  data: function () {
    return {
      menuLocal: { index: 0, index2: 0 },
      menuData: menuData,
      BreadcrumbData: [],
      warningData: [{
        id: 101,
        src: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title: '1号总线流量计',
        content: '压力超下限，报警当前压力位0.59',
        time: '1分钟前'
      }, {
        id: 102,
        src: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title: '2号总线流量计',
        content: '压力超下限，报警当前压力位0.59',
        time: '1分钟前'
      }, {
        id: 103,
        src: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title: '3号总线流量计',
        content: '压力超下限，报警当前压力位0.59',
        time: '1分钟前'
      }, {
        id: 104,
        src: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title: '4号总线流量计',
        content: '压力超下限，报警当前压力位0.59',
        time: '1分钟前'
      }, {
        id: 105,
        src: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title: '3号总线流量计',
        content: '压力超下限，报警当前压力位0.59',
        time: '1分钟前'
      }, {
        id: 106,
        src: 'https://i.loli.net/2017/08/21/599a521472424.jpg',
        title: '4号总线流量计',
        content: '压力超下限，报警当前压力位0.59',
        time: '1分钟前'
      }],
      iconRotate: true,
      iconRotateObj: { iconRotateOne: true, iconRotateTwo: false },
      iconRotateDivObj: { iconRotateDivOne: true, iconRotateDivTwo: false },
      contentContainObj: { contentOne: true, contentTwo: false },
      leftMenuContainObj: { leftMenuContainOne: true, leftMenuContainTwo: false }
    }
  },
  created: function () {
    let self = this
    if (sessionStorage.menuLocal) {
      // 刷新时
      let tem = JSON.parse(sessionStorage.menuLocal)
      let index = parseInt(tem.index)
      let index2 = parseInt(tem.index2)
      self.menuLocal = { index: index, index2: index2 }
      self.nav(self.menuData[index], index, self.menuData[index].children[index2], index2)
    } else {
      // 初始化
      self.nav(self.menuData[0], 0, self.menuData[0].children[0], 0)
    }
  },
  mounted: function () {
    let self = this
    // console.log('--mounted--')
    /* 为处理 首页没有子菜单 特殊处理 */
    // 展开
    let SubmenuHome = document.querySelector('.ivu-menu-submenu-title')
    document.querySelector('.ivu-menu-submenu-title-icon').style.opacity = 0
    SubmenuHome.addEventListener('click', self.homeTitleClick)
    // 收起 menuIcon
    let SubmenuHome2 = document.querySelector('.menuIcon')
    SubmenuHome2.addEventListener('click', self.homeTitleClick)
  },
  destroyed: function () {
    // console.log('--destroyed--')
  },
  methods: {
  	
    show: function (index) {
      this.$Modal.info({
        title: 'User Info',
        content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
      })
    },
    remove: function (index) {
      this.data6.splice(index, 1)
    },
    toPage: function (item, index, item2, index2) {
      this.nav(item, index, item2, index2)
      console.log( item2)
      this.$router.push({ path: "/home/"+item2.url })
    },
    nav: function (item, index, item2, index2) {
      this.BreadcrumbData = []
      sessionStorage.menuLocal = JSON.stringify({ index: index, index2: index2 })
      this.BreadcrumbData.push(item.text) // '首页',
      if (item2 && item2.text) {
        this.BreadcrumbData.push(item2.text)
      }
    },
    logout: function () {
      sessionStorage.menuLocal = ''
      this.$router.push({ path: '/login' })
    },
    // icon按钮 左边菜单展开or收起
    iconRotateClick: function () {
      // 把伸缩状态记录 在 vuex
      this.$store.commit('changeNav')
      let self = this
      self.iconRotate = !self.iconRotate
      // icon展开 收起
      self.iconRotateObj = { iconRotateOne: self.iconRotate, iconRotateTwo: !self.iconRotate }
      self.iconRotateDivObj = { iconRotateDivOne: self.iconRotate, iconRotateDivTwo: !self.iconRotate }
      // 内容与左边的距离
      self.contentContainObj = { contentOne: self.iconRotate, contentTwo: !self.iconRotate }
      // 左边菜单容器变化
      self.leftMenuContainObj = { leftMenuContainOne: self.iconRotate, leftMenuContainTwo: !self.iconRotate }
      // 更新打开的菜单
      self.$nextTick(() => {
        if (sessionStorage.menuLocal && self.iconRotate) {
          self.menuLocal = JSON.parse(sessionStorage.menuLocal)
          self.$refs.side_menu.openedNames = [self.menuLocal.index]
          self.$refs.side_menu.updateOpened()
          self.$refs.side_menu.updateActiveName()
        }
      })
      window.vm.$emit('iconRotateClick', 1)
      // 消除happy-scroll滚动插件,在收起时的影响
      if (self.iconRotate) {
        document.querySelector('.happy-scroll-container').style.width = '220px'
      } else {
        let obj = document.querySelector('.happy-scroll-container')
        obj.style.width = '64px'
        obj.style.overflow = 'visible'
      }
    },
    // 菜单 首页title单击
    homeTitleClick: function () {
      let self = this
      self.BreadcrumbData = []
      sessionStorage.menuLocal = JSON.stringify({ index: 0, index2: 0 })
      self.menuLocal = JSON.stringify({ index: 0, index2: 0 })
      self.BreadcrumbData.push(self.menuData[0].text)
      self.$router.push({ path: 'dashboard' })
      // 首页选中颜色，特殊处理ivu-menu-child-item-active
      if (document.getElementsByClassName('ivu-menu-child-item-active').length > 0) {
        document.getElementsByClassName('ivu-menu-child-item-active')[0].classList.remove('ivu-menu-child-item-active')
      }
      setTimeout(() => {
        let homeLi = document.getElementsByClassName('ivu-menu-submenu')
        homeLi[0].classList.add('ivu-menu-item-active')
        homeLi[0].classList.add('ivu-menu-child-item-active')
        homeLi[0].classList.add('ivu-menu-opened')
      }, 100)
    }
  }
}

</script>
